<template>
<!-- <Scroll @pullingUp="loadMore" @scroll="scroll" ref="scroll" :probe-type="3" class="content" :pull-up-load="true"> -->
<vue-pull-refresh :on-refresh="onRefresh">
    <div class="firstmid">
        <p >{{score}} <span>分</span></p>
        <span> {{time}}&nbsp;{{day}} </span>
        <!-- <transition name="bounce"> -->
            <!--@click="pushout"  @click="show = !show" v-if="show"-->
        <div :class="{'firstpic':true, 'bounce-enter-active':show}" @click="pushout">
            <div class="picword">
                <img src="@/assets/njrpic/firstpic/ic_style.png" alt="">
                <span>覆盖率</span>
                </div>
            <div class="cir">
                 <div class="picword">
                <img src="@/assets/njrpic/firstpic/ic_bateria.png" alt="">
                <span>均匀率</span>
                </div>
            <div class="childpic">
                 <div class="picword">
                <img src="@/assets/njrpic/firstpic/ic_time.png" alt="">
                <span>刷牙时长</span>
                </div>
                <div></div>
            </div>
            </div>
        </div>
        <!-- </transition> -->
        <span>下拉同步数据</span>
        <div>
            <img src="@/assets/njrpic/firstpic/ic_home_drop.png" alt="">
        </div>
    </div>
    </vue-pull-refresh>
<!-- </Scroll> -->

</template>
<script>
import VuePullRefresh from 'vue-pull-refresh';
// import Scroll from '@/components/njrcomponents/Scroll.vue'

export default {
    data(){
        return{
            show:false,
            score:91,
            time:'2020年10月22日',
            day:'11时42分'
        }
    },
    methods:{
        pushout(){
            this.show=true
            let that=this
            let timer=setTimeout(function(){
                that.$router.push('/index/first/brush')
            },500)
        },
        onRefresh: function() {
           let that=this;
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    that.$http.get('/api/users/'+that.$store.state.username)
                    .then(({
                        data,config
                    })=>{
                        if(data.code==200){
                            that.score=data.data.score
                            let time=new Date()
                            let y=time.getFullYear()
                            let m=(time.getMonth()+1+'').padStart(2,'0')
                            let d=(time.getDate()+'').padStart(2,'0')
                            let h=(time.getHours()+'').padStart(2,'0')
                            let mi=(time.getMinutes()+'').padStart(2,'0')
                            // console.log(y+'年'+m+'月'+d+'日');
                            // console.log(h+'时'+mi+'分');
                            that.time=y+'年'+m+'月'+d+'日'
                            that.day=h+'时'+mi+'分'
                        }else{
                            this.$message.error("刷新数据失败")
                        }
                    })
                    //  that.$router.push('/index/first/pair');
                    resolve();
                }, 1000);
            });
        }
    //     loadMore() {
    //    this.$refs.scroll.scroll.refresh();
    // },
    // scroll(position){
    //     if(position.y>100){
    //    this.$router.push('/index/first/pair');
    //     }
    // console.log(position.y);
    // }
    },
    components:{
        // Scroll
        'vue-pull-refresh': VuePullRefresh
    }
}
</script>
<style lang="less" scoped>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.firstmid{
    text-align: center;
    >p{
        font-size:100px;
        margin-bottom: 25px;
        padding-top: 10px;
        span{
            font-size: 25px;
        }
    }
    p+span{
        font-size: 35px;
    }
    .firstpic+span{
        color: #a17fd1;
    }
    span+div>img{
        width: 8%;
    }
    // 画圆圈
    .firstpic{
        position: relative;
       >.picword{
           text-align: left;
           position: absolute;
           top:0px;
           left: 30px;
           height: 65px;
           border-right:none;
           background-color: #8f61f7;
           border-radius: 45px;
           color: white;
           img{
               width: 20%;
           }
       }
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background-color: #9062f8;
        margin: 50px auto;
        padding: 65px;
        .cir{
        position: relative;
        >.picword{
           text-align: left;
           position: absolute;
           border-right:none;
           top:0px;
           left: -30px;
           height: 65px;
           background-color:#7c43f2;
           border-radius: 45px;
           color: white;
           img{
               width: 20%;
           }
       }
        width: 250px;
        height: 250px;
        background-color: #7c43f2;
        border-radius: 50%;
        border:1px solid white;
        padding: 65px;
        .childpic{
            position: relative;
            >.picword{
           text-align: left;
           position: absolute;
           border-right:none;
           top:0px;
           left: -100px;
           width: 230px;
           height: 65px;
           background-color:#5921c4;
           border-radius: 45px;
           color: white;
           img{
               width: 20%;
           }
       }
       width: 120px;
        height: 120px;
        padding: 65px;
        background-color:#5921c4;
        border-radius: 50%;
        border:1px solid white;
        >div{
            width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: white;
        }
        }
        }
    }
}
</style>